<template>
    <ContentField v-if="!$store.state.user.pulling_info"><!--只有拉取信息结束时，才会展示登陆界面-->
        <div class="row justify-content-md-center"><!--后面的用于居中-->
            <div class="col-3">
                <form @submit.prevent="login"><!--用于绑定表单提交按钮，跳转login函数，.prevent是为了阻止掉默认行为-->
                    <div class="mb-3">  
                        <label for="username" class="form-label">用户名</label>
                        <input v-model="username" type="text" class="form-control" id="username" placeholder="请输入用户名"><!--绑定下面获取的username-->
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input v-model="password" type="password" class="form-control" id="password" placeholder="请输入密码"><!--绑定下面获取的password-->
                    </div>
                    <div class="error-message">{{ error_message }}</div>
                    <button type="submit" class="btn btn-primary">提交</button>
					</form>
            </div>
        </div>
    </ContentField>
</template>

<script>
    import ContentField from '../../../components/ContentField.vue'
    import { useStore } from 'vuex'
    import { ref } from 'vue'
    import router from '../../../router/index'
    
    export default {
        components: {
            ContentField
        },
        setup() {
            const store = useStore();
            let username = ref('');
            let password = ref('');
            let error_message = ref('');
            const jwt_token = localStorage.getItem("jwt_token");//尝试从浏览器内存中获取token
            if (jwt_token) {//如果token未过期
                console.log(jwt_token);
                store.commit("updateToken", jwt_token);//就更新全局变量中的token
                store.dispatch("getinfo", { //获取用户信息成功，就跳转到首页(pk页面)
                    success() {
                        router.push({ name: "home" });//自动跳转家页面
                        store.commit("updatePullingInfo", false);//拉取信息结束了，改标记，然后就能显示登陆界面
                    },
                    error() {
                        store.commit("updatePullingInfo", false);//拉取信息结束了，改标记，然后就能显示登陆界面
                    }
                })
            }else {
                store.commit("updatePullingInfo", false);//拉取信息结束了，改标记，然后就能显示登陆界面
            }
            const login = () => {
                error_message.value = "";
                store.dispatch("login", {//调用修改全局变量的函数
                    username: username.value,
                    password: password.value,
                    success() {
                        store.dispatch("getinfo", {
                            success() {
                                router.push({ name: 'home' });
                            }
                        })
                    },
                    error() {
                        error_message.value = "用户名或密码错误";
                    }
                })
            }
            return {
                username,
                password,
                error_message,
                login,
            }
        }
    }
    </script>

<style scoped>
    button {
        width: 100%;
    }
    div.error-message {
        color: red;
    }
</style>